<%include ../includes/header.html %>
<style type="text/css">
    div#canvas-frame {
        border: none;
        cursor: pointer;
        width: 100%;
        height: 500px;
        background-color: #EEEEEE;
        position: relative;
    }

</style>
    <section class="content-header">
      <h1>
        初级教程
        <small>第6章 纹理，不一样的皮肤(一)</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Junior</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div id="canvas-frame"></div>
    </section>
    <!-- /.content -->
<%include ../includes/footer.html %>
<script>
  $(function(){
    var camera, scene, renderer;
    var mesh;
    var canvasWidth, canvasHeight;

    init();
    animate();

    function init() {

        var canvasWidth = document.getElementById('canvas-frame').clientWidth;
        var canvasHeight = document.getElementById('canvas-frame').clientHeight;
        renderer = new THREE.WebGLRenderer();
        renderer.setSize( canvasWidth, canvasHeight );
         document.getElementById('canvas-frame').appendChild(renderer.domElement);
        //
        camera = new THREE.PerspectiveCamera( 70, canvasWidth / canvasHeight, 1, 1000 );
        camera.position.z = 400;
        scene = new THREE.Scene();


        var geometry = new THREE.PlaneGeometry( 500, 300, 1, 1 );
        geometry.vertices[0].uv = new THREE.Vector2(0,0);
        geometry.vertices[1].uv = new THREE.Vector2(2,0);
        geometry.vertices[2].uv = new THREE.Vector2(2,2);
        geometry.vertices[3].uv = new THREE.Vector2(0,2);
        // 纹理坐标怎么弄
        var texture = new THREE.TextureLoader().load("/images/right-hand.jpg");
        var material = new THREE.MeshBasicMaterial({map:texture});
        var mesh = new THREE.Mesh( geometry,material );
        scene.add( mesh );

        // window.addEventListener( 'resize', onWindowResize, false );

    }

    function onWindowResize() {
        camera.aspect = window.canvasWidth / window.canvasHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.canvasWidth, window.canvasHeight );
    }

    function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }
  })
</script>
